<template>
	<view class="electricity" :style="`--color:${color}`" >
		<view class="electricity_progress" :style="'width:'+(progress > 100 ? 100:progress)+'%'"></view>
	</view>
</template>

<script setup>
	defineProps({
		progress: {
			type: Number,
			default: 100
		},
		color: {
			type: String,
			default: "#333"
		}
	})
</script>

<style lang="scss" scoped>
	.electricity {
		border: 2rpx solid var(--color);
		border-radius: 6rpx;
		width: 38rpx;
		height: 20rpx;
		position: relative;
		margin: 0 auto;
		padding: 2rpx;

		&::before {
			content: "";
			display: block;
			background: var(--color);
			width: 4rpx;
			height: 60%;
			position: absolute;
			top: 20%;
			right: -8rpx;
			// transform: translate(0, -50%);
			border-radius: 5rpx;
			border-top-right-radius: 5rpx;
			border-bottom-right-radius: 5rpx;
		}

		&_progress {
			background-color: var(--color);
			// margin: 2rpx;
			height: 100%;
			border-radius: 4rpx;
		}
	}
</style>